<template>
  <div class="main-container" id="content">
    <div class="main-content">
      <div class="btns">
        <div class="right-title flex"></div>
        <el-button class="btn" @click="back()">返回</el-button>
      </div>
      <div class="content">
        <div class="status-box" v-for="item in statusData" :key="item.id">
          <div class="top">
            <div>{{ item.attributeName }}</div>
            <div class="tip" v-if="item.deviceStatus == 0" style="color: grey">
              <div class="yuan" style="background-color: grey"></div>
              离线
            </div>
            <div class="tip" v-if="item.deviceStatus == 1" style="color: #4dc24c">
              <div class="yuan" style="background-color: #4dc24c"></div>
              在线
            </div>
            <div class="tip" v-if="item.deviceStatus == 2" style="color: red">
              <div class="yuan" style="background-color: red"></div>
              告警
            </div>
          </div>
          <div class="bottom">
            <div>{{ item.deviceName }}</div>
            <div style="font-size: 2.16rem">{{ item.realDataConvert }}</div>
            <div>采集时间：{{ item.updateTime }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getControlDeviceStatuss } from "@/api/filtration";
export default {
  props: {},
  data() {
    return {
      searchForm: {
        baseId: "",
      },
      statusData: [],
      iFullScreen: true,
    };
  },
  mounted() {
    this.searchForm.baseId = this.$route.query.id;

    // 获取设备状态列表
    this.getControlDeviceStatuss();
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        path: `/filtration/home`,
      });
    },
    // 获取设备状态列表
    getControlDeviceStatuss() {
      getControlDeviceStatuss({ id: this.searchForm.baseId })
        .then((res) => {
          if (res.code == 200) {
            this.statusData = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.main-container {
  background-color: #045cad;
  padding: 1rem 0 1.5rem 0;
  .main-content {
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .btns {
      width: 90%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // border: 1px solid red;
    }
    .content {
      display: flex;
      width: 90%;
      flex-flow: wrap;
      margin-top: 3rem;
      justify-content: space-between;
      //    border: 1px solid red;
      .status-box {
        width: 26rem;
        height: 16rem;
        margin-top: 2rem;
        border: 1px solid red;
        text-align: center;
        background: #ffffff;
        border-radius: 0.24rem;
        border: 0.04rem solid #fbfbfd;
        .top {
          width: 100%;
          height: 3rem;
          line-height: 3rem;
          font-size: 1.26rem;
          border-bottom: 1px solid #eceff5;
          position: relative;
          .tip {
            height: 3rem;
            //    border: 1px solid red;
            position: absolute;
            top: 0;
            right: 0.8rem;
            font-size: 1rem;
            display: flex;
            align-items: center;
            .yuan {
              width: 1rem;
              height: 1rem;
              margin-right: 0.5rem;
              border-radius: 50%;
            }
          }
        }
        .bottom {
          width: 100%;
          height: 12rem;
          //    border: 1px solid red;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>
